<template>
  <div class="pz_box cardCont">
    <div v-if="content.style == '2'" class="style_2">
      <div class="header">
        <div class="left">{{ translate("limitDis") }}</div>
        <div class="right">
          {{ translate("ckgd") }}<i class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="hd_list">
        <div
          v-for="(item, index) in discountConfig.venueContent.customList"
          :key="index"
          class="item"
        >
          <img class="banner" :src="item.businessImg || item.icon" alt="" />
          <div class="name">{{ item.businessName || item.title }}</div>
          <div class="placeholder9">
            {{ item.businessInfo || item.bean.businessInfo }}
          </div>
          <div class="df_sb">
            <div class="price_wrap">
              <span class="active"
                ><span class="price"
                  >{{ translate("renminbi")
                  }}{{
                    item.businessOriginPrice
                      ? item.businessOriginPrice
                      : item.bean && item.bean.discountPrice
                      ? item.bean.discountPrice
                      : 0
                  }}</span
                ></span
              >
              <span class="placeholder9 ml10"
                >{{ translate("renminbi")
                }}{{
                  item.discountPrice
                    ? item.discountPrice
                    : item.bean && item.bean.price
                    ? item.bean.price
                    : 0
                }}</span
              >
            </div>
            <div class="btn">{{ translate("qianggou") }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="content.style == '1'" class="style_1">
      <div class="header">
        <div class="left">{{ translate("limitDis") }}</div>
        <div class="right">
          {{ translate("ckgd") }}<i class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="hd_list">
        <div
          v-for="(item, index) in discountConfig.venueContent.customList"
          :key="index"
          class="item"
        >
          <div class="content">
            <img
              class="icon"
              src="XXXXXXXXX"
              alt=""
            />
            <img class="banner" :src="item.businessImg || item.icon" alt="" />
            <div class="main">
              <div class="name pb10">{{ item.businessName || item.title }}</div>
              <div class="placeholder9">
                {{ item.businessInfo || item.bean.businessInfo }}
              </div>
              <div class="bottom">
                <div class="price_wrap">
                  <span class="active"
                    >{{ translate("disCost") }}：{{ translate("renminbi")
                    }}<span class="price">{{
                      item.businessOriginPrice
                        ? item.businessOriginPrice
                        : item.bean && item.bean.discountPrice
                        ? item.bean.discountPrice
                        : 0
                    }}</span></span
                  >
                  <span class="placeholder9 ml10"
                    >{{ translate("renminbi")
                    }}{{
                      item.discountPrice
                        ? item.discountPrice
                        : item.bean && item.bean.price
                        ? item.bean.price
                        : 0
                    }}</span
                  >
                </div>
                <div class="btn">{{ translate("qianggou") }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      discountConfig: {
        content: {},
        venueContent: {
          customList: []
        }
      },
      content: {}
    }
  },
  watch: {
    config(val) {
      this.discountConfig = this.config
      this.content = this.config.content
    }
  },
  methods: {

  }

}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.cardCont {
  width: 100%;
}
.style_1 {
  width: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    .left {
      font-size: 38px;
    }
    .right {
      color: #999999;
    }
  }
  .item {
    border-radius: 12px;
    margin-bottom: 20px;
    position: relative;
    .icon {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .iteM_SHOP_header {
      color: red;
      display: flex;
      align-items: center;
      background: #f9dde0;
      padding: 0 20px;
      height: 80px;
      position: relative;

      .df_ac {
        color: #000000;
        .num {
          font-size: 22px;
          color: #fff;
          background-color: #000000;
          width: 40px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 4px;
          border-radius: 12px;
        }
      }
    }
    .content {
      display: flex;
      background-color: #fff;
      padding: 12px;
      border-radius: 12px;
      .banner {
        width: 150px;
        margin-right: 10px;
      }
      .main {
        flex: 1;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 32px;
          font-weight: 700;
        }
        .placeholder9 {
          font-size: 28px;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          .price_wrap {
            .active {
              color: red;
              font-weight: 700;
              font-size: 30px;
              .price {
                font-size: 36px;
              }
            }
            .placeholder9 {
              text-decoration: line-through;
            }
          }
          .btn {
            color: #fff;
            background-color: #ed7037;
            border-radius: 30px;
            width: 120px;
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
          }
        }
      }
    }
  }
}
.style_2 {
  /* background: linear-gradient(360deg, #ffffff 0%, #ffd7db 100%); */
  width: 100%;
  padding: 36px 12px;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* color: red; */
    position: relative;
    padding: 0px 0 20px;
    .left {
      width: 180px;
      font-size: 38px;
    }
    .icon {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .right {
      padding: 8px 16px;
      border-radius: 20px;
      padding-right: 0;
      /* background-color: #fff; */
      display: flex;
      align-items: center;
    }
  }
  .hd_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1%;
    .item {
      width: 48%;
      margin: 1%;
      padding: 8px;
      border-radius: 8px;
      background-color: #fff;
      .banner {
        width: 100%;
        height: 170px;
      }
      .name {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .placeholder9 {
        color: #999999;
        font-size: 28px;
      }
      .price_wrap {
        margin-top: 10px;
        margin-bottom: 10px;
        .active {
          color: red;
          font-weight: 700;
          font-size: 30px;
          .price {
            font-size: 36px;
          }
        }
        .placeholder9 {
          text-decoration: line-through;
        }
      }
      .btn {
        color: #fff;
        background-color: #ed7037;
        border-radius: 30px;
        width: 120px;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
      }
      .duration_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: red;
        background-color: #fcf0f0;
        height: 48px;
        padding-left: 10px;
        border-radius: 24px;
        margin: 0 10px;
        font-size: 28px;
        img {
          height: 100%;
        }
      }
    }
  }
}
</style>
